/**
 * Created by bonnie on 17/9/8.
 */
import React from 'react';
import template from './../commonui/template';
import getData from  './../Redux/action'
import { Link } from 'react-router-dom';
import {Form,Icon,Input,Button,CheckBox,Row,Col} from 'antd';
const FormItem = Form.Item;

class LoginForm extends React.Component{
    constructor(props){
        super(props);
        this.handleSubmit=this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        const data=this.props.form.getFieldsvalue();
        console.log(data);


    }
    render(){
        const {getFieldDecorator} = this.props.form;
        return (
            <div>
                <div><span>Personal</span><span>Comapny</span></div>
                <div>
                    <Form onSubmit={this.handleSubmit}>
                        <Row>
                            <Col span={18}>
                                <Row>
                                    <Col>
                                        <FormItem label="Telphone">
                                            {getFieldDecorator('phoneNO',{rules:[{required:true,message:'Please input your telephone'}]})(
                                                <Input prefix={<Icon type="phone"/>} style={{fontSize:13}} />
                                            )}
                                        </FormItem>
                                    </Col>
                                </Row>
                                <Row>
                                    <Col>
                                        <FormItem label="Captcha">
                                            <Row gutter={24}>
                                                <Col span={12}>
                                                        {getFieldDecorator('captcha',{rules:[{
                                                            required:true,message:'Please input the captcha you got'
                                                        }]})
                                                        (
                                                            <Input size="large"/>
                                                        )}

                                                </Col>
                                                <Col span={12}>

                                                        <Button size="large">Get captcha</Button>

                                                </Col>
                                            </Row>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={6}>
                                <Row type="flex" justify="center" align="middle">
                                    <Col>
                                        <button>Login</button>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </Form>
                </div>
            </div>
        )
    }
}

const Login =Form.create()(LoginForm);
export default template({
    id: 'Login',
    component: Login
});